<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
		<!--引入字体样式-->
		<link rel="stylesheet" href="./css/fontawesome/all.min.css">
		<title>简易购</title>
		<style type="text/css">
			#new1:after {
			    position: absolute;
			    transition-duration: 500ms;
			    content: "";
			    width: 100%;
			    height: 100%;
			    background-color: rgba(255, 255, 255, 0.6);
			    top: 0;
			    left: 0;
			    z-index: -10;
		</style>
	</head>
	<body>
		<!-- 导航条-->
		<div class="container-fluid">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<span class="navbar-text text-dark">
						简易购欢迎您！ 请
					</span>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item ">
								<a class="nav-link text-dark" href="#">登录<span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link text-danger pl-1" href="#">免费注册</a>
							</li>
						</ul>
						<form class="form-inline my-2 my-lg-0">
							<a class="nav-link  pr-4 text-dark" href="#">我的订单</a>
							<a class="nav-link  pl-2 text-dark" href="#">我的简易购</a>
						</form>
					</div>
				</div>
			</nav>
		</div>
		<!-- /导航条 -->
		<!-- 搜索 -->
		<div class="container">
			<div class="row mt-3">
				<div class="col-2 ">
					<h2 style="font-weight: bold;">简易购</h2>
				</div>
				<div class="col-7">
					<div class="input-group mb-3 ">
					  <input type="text" class="form-control border-danger rounded-0"  aria-label="Recipient's username" aria-describedby="button-addon2">
					  <div class="input-group-append">
					    <button class="btn btn-danger px-5 rounded-0 text-light" type="button" id="button-addon2">搜&nbsp;索</button>
					  </div>
					</div>
				</div>
				<div class="col-1"></div>
				<div class="col-2">
					<div id="cart" class="mr-0" style="border: #000000 1px solid;height: 38px; width: 120px;">
						<i class="fas fa-shopping-cart  cursor-pointer  ml-2" style="margin-top: 10px;"></i>
					<a href="#" class="text-dark"style="margin-top: 10px;text-decoration: none;">我的购物车</a>
					</div>
				</div>
			</div>
		</div>
		<!-- /搜索 -->
		<!-- 导航 -->
		<div class="container mt-2">
			<ul class="nav">
			  <li class="nav-item">
			    <a class="nav-link active bg-danger text-light" href="#">商品分类</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link text-dark" href="#">手机数码</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link text-dark" href="#">电脑办公</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link text-dark" href="#">潮流服饰</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link text-dark" href="#">美味食品</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link text-dark" href="#">装饰设计</a>
			  </li>
			</ul>
			<hr style=" border:#939393 1px solid;margin-top: 0px;">
		</div>
		<!-- /导航 -->
		<!-- 轮播图 -->
		<div class="container">
			<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
					<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
					<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
					<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
					<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item">
						<img class="d-block w-100" src="img/blog-13.png" alt="First slide" >
						<div class="carousel-caption" style="position: absolute;top: 200px;right: 200px;">
							<p style="font-size: 100px;">简易购</p>
							<p style="font-size: 20px;">尽享天下美食，体味百味生活</p>
						</div>
					</div>
					<div class="carousel-item active">
						<img class="d-block w-100" src="img/img_bg_4.png" alt="Second slide" >
						<div class="carousel-caption" style="position: absolute;top: 200px;right: 200px;">
							<p style="font-size: 100px;">简易购</p>
							<p style="font-size: 20px;">小小手机，指尖的爱，视觉的美，百变万种，是你的最爱</p>
						</div>
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" src="img/blog-3.jpg" alt="Third slide">
						<div class="carousel-caption" style="position: absolute;top: 200px;right: 200px;">
							<p style="font-size: 100px;">简易购</p>
							<p style="font-size: 20px;">拥有我，你不再是出土文物！</p>
						</div>
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" src="img/blog-9.png" alt="Fourth slide">
						<div class="carousel-caption" style="position: absolute;top: 200px;right: 200px;">
							<p style="font-size: 100px;">简易购</p>
							<p style="font-size: 20px;">雄居大千“饰”界，精雕细节人生</p>
						</div>
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" src="img/blog6.jpg" alt="Fourth slide">
						<div class="carousel-caption" style="position: absolute;top: 200px;right: 200px;">
							<p style="font-size: 100px;">简易购</p>
							<p style="font-size: 20px;">引领风尚坐标，定位时尚前沿</p>
						</div>
					</div>
				</div>
				<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<!-- /轮播图 -->
		<!-- 最新商品 -->
		<div class="container mt-5">
			<div class="row mb-5">
				<div id="new1" class="ml-3" style="background-image: url(img/product_1.png);background-color: rgba(255,255,255,0.5);background-size:cover;width:220px" >
					<div id="font" style="position: absolute ;font-size:30px; font-weight: 700;margin-top: 120px; margin-left: 50px;">
						最新商品
					</div>
				</div>
				
				<div class="card rounded-0" style="width:222px;">
				  <img class="card-img-top" src="img/c_0001.jpg" alt="Card image cap">
				  <div class="card-body">
				    <h5 class="card-title">三星 Galaxy Note10</h5>
				    <p class="card-text text-danger">￥1000.00</p>
				  </div>
				</div>
				<div class="card rounded-0" style="width:222px;">
				  <img class="card-img-top" src="img/c_0002.jpg" alt="Card image cap">
				  <div class="card-body">
				    <h5 class="card-title">三星 Galaxy Note10</h5>
				    <p class="card-text text-danger">￥1000.00</p>
				  </div>
				</div>
				<div class="card rounded-0" style="width:222px;">
				  <img class="card-img-top" src="img/c_0003.jpg" alt="Card image cap">
				  <div class="card-body">
				    <h5 class="card-title">三星 Galaxy Note10</h5>
				    <p class="card-text text-danger">￥1000.00</p>
				  </div>
				</div>
				<div class="card rounded-0" style="width:222px;">
				  <img class="card-img-top" src="img/c_0004.jpg" alt="Card image cap">
				  <div class="card-body">
				    <h5 class="card-title">三星 Galaxy Note10</h5>
				    <p class="card-text text-danger">￥1000.00</p>
				  </div>
				</div>
			</div>
		</div>
		<!-- /最新商品 -->
		<!-- 页脚 -->
		<div class="container-fluid">
			<div class="footer bg-danger ">
				
				<p class="text-center text-light py-2">@HUNAU-SYB</p>
				
			</div>
		</div>
		<!-- /页脚 -->
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="./js/plugins/jQuery/jquery-3.3.1.slim.min.js"></script>
		<script src="./js/plugins/bootstrap/popper.min.js"></script>
		<script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
	</body>
</html>
